<template>
	<view class="lines-content">
		<view class="lines-content_item" v-for="index in 5" :key="index">
			<view class="lines-content_item_dt">
				<view class="lines-content_item_dt_day">
					0{{index}}
				</view>
				<view class="lines-content_item_dt_title">
					出发地-乌鲁木齐（接站）出发地-乌鲁木齐（接站）出发地-乌鲁木齐（接站）
				</view>
			</view>
			<view class="lines-content_item_dl">
				<view class="lines-content_item_dl_icon">
					<rui-icon icon="spot" size="32" color="var(--color)"></rui-icon>
				</view>
				<view class="lines-content_item_dl_title">
					行程详情
				</view>
				<view class="lines-content_item_dl_content">
					123123123
				</view>
				
			</view>
			<view class="lines-content_item_dl">
				<view class="lines-content_item_dl_icon">
					<rui-icon icon="arrow-right" size="22" color="var(--color)"></rui-icon>
				</view>
				<view class="lines-content_item_dl_title">
					景点
				</view>
				<view class="lines-content_item_dl_scenic" @click="$rui.route('/pages/mdd/detail/detail')">
					<image class="lines-content_item_dl_scenic_img" src="/static/images/lines.jpg" mode=""></image>
					<view class="lines-content_item_dl_scenic_head">
						<view class="lines-content_item_dl_scenic_head_name">
							喀纳斯景区
						</view>
						<view class="lines-content_item_dl_scenic_head_desc">
							AAAAA级景区品牌影响力100强榜单
						</view>
					</view>
					<view class="lines-content_item_dl_scenic_weather">
						22°-30° <rui-icon icon="weather" color="#fff" size="38"></rui-icon>
					</view>
				
					<view class="lines-content_item_dl_scenic_tips">
						喀纳斯风景区属于寒温带地区，寒冷期长，无霜期短由于地处欧亚大陆腹地，远离海洋，纬度较高，相对高差悬殊，地形复杂，形成了独特的气候特征
					</view>
				</view>
				<view class="lines-content_item_dl_scenic" @click="$rui.route('/pages/mdd/detail/detail')">
					<image class="lines-content_item_dl_scenic_img" src="/static/images/lines.jpg" mode=""></image>
					<view class="lines-content_item_dl_scenic_head">
						<view class="lines-content_item_dl_scenic_head_name">
							喀纳斯景区
						</view>
						<view class="lines-content_item_dl_scenic_head_desc">
							AAAAA级景区品牌影响力100强榜单
						</view>
					</view>
					<view class="lines-content_item_dl_scenic_weather">
						22°-30° <rui-icon icon="weather" color="#fff" size="38"></rui-icon>
					</view>
				
					<view class="lines-content_item_dl_scenic_tips">
						喀纳斯风景区属于寒温带地区，寒冷期长，无霜期短由于地处欧亚大陆腹地，远离海洋，纬度较高，相对高差悬殊，地形复杂，形成了独特的气候特征
					</view>
				</view>
			</view>
			
			<view class="lines-content_item_dl">
				<view class="lines-content_item_dl_icon">
					<rui-icon icon="food" size="32" color="var(--color)"></rui-icon>
				</view>
				<view class="lines-content_item_dl_title">
					用餐
				</view>
				<view class="lines-content_item_dl_content">
					早中晚
				</view>
			</view>
			<view class="lines-content_item_dl">
				<view class="lines-content_item_dl_icon">
					<rui-icon icon="hotel" size="32" color="var(--color)"></rui-icon>
				</view>
				<view class="lines-content_item_dl_title">
					住宿
				</view>
				<view class="lines-content_item_dl_content">
					北屯
				</view>
			</view>
		</view>
	</view>
</template>

<script>

</script>

<style lang="scss" scoped>
	.lines-content {
		&_item {
			margin-left: 20rpx;
			margin-bottom: 20rpx;

			&:first-child {
				margin-top: 50rpx;
			}

			&:last-child {
				margin-bottom: 0;
			}

			&_dt {
				font-weight: bold;
				position: relative;
				margin-bottom: 30rpx;

				&_day {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					// background: var(--color);
					color: var(--color);
					font-size: 44rpx;
					font-weight: bold;
					text-align: center;
					line-height: 50rpx;
					position: absolute;
					left: -25rpx;
					top: -6rpx;
					z-index: 2;

					&::before {
						content: "DAY";
						position: absolute;
						width: inherit;
						top: -20rpx;
						left: 4rpx;
						color: #ccc;
						font-size: 24rpx;
						font-weight: normal;
						z-index: -1;
					}
				}

				&_title {
					padding-left: 45rpx;
				}
			}

			&_dl {
				position: relative;
				padding-bottom: 30rpx;
				padding-left: 45rpx;
				border-left: 1rpx solid #eee;

				&:last-child {
					border-left: none;
				}

				&_scenic {
					position: relative;
					margin-top: 20rpx;

					&_img {
						height: 420rpx;
						width: 100%;
						border-radius: 20rpx;
					}

					&_weather {
						position: absolute;
						top: 30rpx;
						right: 20rpx;
						color: #fff;
						font-size: 24rpx;
						display: flex;
						align-items: center;
					}

					&_head {
						position: absolute;
						top: 0;
						left: 0;
						padding: 30rpx;

						&_name {
							font-size: 36rpx;
							color: #fff;
							text-shadow: 0 4rpx 0 rgba(0, 0, 0, .3), 4rpx 0 0 rgba(0, 0, 0, .3);
						}

						&_desc {
							color: #fff;
							font-size: 24rpx;
							text-shadow: 0 4rpx 0 rgba(0, 0, 0, .3), 4rpx 0 0 rgba(0, 0, 0, .3);
						}
					}

					&_tips {
						position: absolute;
						bottom: 20rpx;
						padding: 30rpx;
						height: 40rpx;
						color: #fff;
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}


				&_icon {
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					position: absolute;
					top: -8rpx;
					left: -25rpx;
					background: #fff;
				}

				&_title {
					font-weight: bold;
					// color: var(--color);
				}

				&_content {
					margin-top: 10rpx;
					// background: #f4ffff;
					// border-radius: 10rpx;
					// padding: 15rpx;
				}

			}
		}
	}
</style>